import axios from 'axios';
import * as React from 'react';
import { useHistory, useLocation } from 'umi';
import './details.less';
import { LeftOutline, MoreOutline } from 'antd-mobile-icons';
import icon from './font/iconfont.css';
import { Swiper, Empty } from 'antd-mobile';
import Good from '../component/good/Good';

export interface IdetailsProps {}

export default function Details(props: IdetailsProps) {
  let history = useHistory();
  let location = useLocation();
  let id = location.state.id;
  let fid = location.state.fid._id;
  console.log(id, fid, '171717');

  let body = React.useRef(null);
  // 商品信息
  const [data, setData] = React.useState({});
  // 多个商品信息
  const [datas, setDatas] = React.useState([]);

  // 最顶部的
  const [showTop, setShowTop] = React.useState(true);

  // 图片数据
  let [images] = React.useState([
    require('./images/1.jpg'),
    require('./images/2.jpg'),
    require('./images/3.jpg'),
    require('./images/4.jpg'),
    require('./images/5.jpg'),
  ]);
  React.useEffect(() => {
    axios.get('/api/classify/getgood?id=' + id).then((res) => {
      console.log(res.data.data, '1121212121');
      setData(res.data.data[0]);
      // list = res.data.data[0]
    });
    show();
    window.addEventListener('scroll', listener, true);
  }, []);

  // 监听滚动
  function listener() {
    // console.log(body.current.scrollTop, 'clientHeight');
    if (body.current.scrollTop > 376) {
      setShowTop(false);
    } else if (body.current.scrollTop < 100) {
      setShowTop(true);
    }
  }
  // console.log(data,'515151515');

  function show() {
    axios.get('/api/classify/getItem?id=' + fid).then((res) => {
      console.log(res, '575757');

      setDatas(res.data.data);
    });
  }

  return (
    <div className="details">
      <div className="top">
        {/* 无背景色 */}
        <div className={showTop ? 'without' : 'none'}>
          <div className="left">
            <LeftOutline
              onClick={() => {
                history.goBack();
              }}
            />
          </div>
          <h3>商品详情</h3>
          <div className="right">
            <span
              className={`${icon.iconfont} ${icon.icon_share}`}
              style={{ fontSize: '25px', marginRight: '10px' }}
            ></span>
            <MoreOutline className="r" />
          </div>
        </div>
        {/* 滚动到轮播图的底部出现 */}
        <div className={showTop ? 'none' : 'has'}>
          <div className="left">
            <LeftOutline
              onClick={() => {
                history.goBack();
              }}
            />
          </div>
          <div className="middle">
            <div>商品</div>
            <div>评论</div>
            <div>详情</div>
            <div>推荐</div>
          </div>
          <div className="right">
            <span
              className={`${icon.iconfont} ${icon.icon_share}`}
              style={{
                fontSize: '25px',
                color: '#d6d9e3',
                marginRight: '10px',
              }}
            ></span>
            <MoreOutline className="r" />
          </div>
        </div>
      </div>
      <div className="body" ref={body}>
        <div className="swiper">
          <Swiper autoplay>
            {images.map((item, index) => (
              <Swiper.Item key={index}>
                <img src={item} alt="" width="100%" />
              </Swiper.Item>
            ))}
          </Swiper>
        </div>
        <div className="price">
          <div>
            <span>￥</span>
            {data.price}
          </div>
          <div>{data.tag}</div>
        </div>
        <div className="name">
          <div className="left">{data.name}</div>
          <div className="right">
            <span className={`${icon.iconfont} ${icon.icon_shoucang}`}></span>
            收藏
          </div>
        </div>
        <div className="send"></div>
        <div className="talks"></div>
        <div className="reco"></div>
        <h3>商品详情</h3>
        <div className="det">
          {images.map((item) => {
            return <img src={item} width="100%" alt="" />;
          })}
          <div>
            价格说明
            <br />
            <br />
            * 划线价格
            <br />
            商品的专柜价、吊牌价、正品零售价、厂商指导价或该商品的曾经展示过的销售价等，并非原价，仅供参考。
            <br />
            <br />
            * 未划线价格
            <br />
            商品的实时标价，不因表述的差异改变性质。具体成交价格根据商品参加活动，或会员使用优惠券、积分等发生变化，最终以订单结算页价格为准。
            <br />
            <br />*
            商家详情页(含主图)以图片或文字形式标注的一口价、促销价、优惠价等价格可能是在使用优惠券、满减或特定优惠活动和时段等情形下的价格，具体请以结算页面的标价、优惠条件或活动规则为准。
          </div>
        </div>
        <h3>看了又看</h3>
        <div className="like">
          {datas.length != 0 ? (
            datas.map((item) => {
              return (
                <Good
                  name={item.name}
                  price={item.price}
                  tag={item.tag}
                  desc={item.desc}
                  imgs={item.imgs}
                  id={item._id}
                ></Good>
              );
            })
          ) : (
            <Empty description="暂无商品" />
          )}
        </div>
      </div>
      <div className="bottom">
        <div className="left">
          <div>
            <span
              className={`${icon.iconfont} ${icon.icon_shouye_tianchong}`}
            ></span>
            <p>首页</p>
          </div>
          <div>
            <span className={`${icon.iconfont} ${icon.icon_cartfill}`}></span>
            <p>购物车</p>
          </div>
          <div>
            <span
              className={`${icon.iconfont} ${icon.icon_kefu_tianchong}`}
            ></span>
            <p>客服</p>
          </div>
        </div>
        <div className="right">
          <div className="cart">加入购物车</div>
          <div className="buy">立即购买</div>
        </div>
      </div>
    </div>
  );
}
